<template>
  <section>
    <div>
      <a-popover placement="rightTop"
                 trigger="click">
        <template slot="content">

          <!-- 选择图标列表 -->
          <ZAppIconList :size="5"
                        v-model="appIcon"
                        :iconType="iconType"
                        :hideUploadIcon="hideUploadIcon">
          </ZAppIconList>
        </template>
        <!-- 图标显示 -->
        <ZIconShow :imgSize="imgSize"
                   :icon-data="appIcon">
        </ZIconShow>
      </a-popover>
    </div>
  </section>
</template>

<script>
import ZAppIconList from './ZAppIconList'
import ZIconShow from './ZIconShow'

import PropTypes from '@zh/common-utils/prop-types'
const cloneDeep = require('clone')
export default {
  name: 'ZAppIcon',
  extends: null,
  mixins: [],
  components: { ZAppIconList, ZIconShow },
  /** 父页面传入的参数 */
  props: {
    // 数据值
    value: PropTypes.object.def({}),
    // 图片大小
    imgSize: PropTypes.number.def(50),
    // 是否允许上传图片
    hideUploadIcon: PropTypes.bool.def(true),
    // 图标类型：app应用图标 form表单图标
    iconType: PropTypes.string.def('')
  },
  data () {
    return {
      // 选择的图标数据
      appIcon: {}
    }
  },
  computed: {},
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler (value) {
        this.appIcon = cloneDeep(value)
      }
    },
    appIcon: {
      deep: true,
      immediate: true,
      handler (val) {
        this.$emit('handelAppIcon', val)
      }
    }

  },

  methods: {

  }
}
</script>

<style scoped>
</style>
